<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--方法是函数的一个特例，函数赋值给对象的属性叫做方法。 -->

    <!-- this是什么？
        如何确定this的值？
    -->
    <!-- 1. this是什么？
    * 任何函数本质上都是通过某个对象调用的，如果没有直接指定，就是window对象
    * 所有函数内部都有一个变量this 
    * 它的值是调用函数的当前对象（谁调用它，this就是谁）
        * 一个关键字，一个内置的引用变量
        * 在函数内都可以直接使用this
        * this 代表调用函数的当前对象
        * 在调用函数时，this还没有确定，只有在执行时才动态确定（绑定）的   -->
    <!-- 根据调用函数的方式不同，this 会指向不同的对象:
            1. 以函数的形式调用，this指向window（因为，一切函数都是window的方法;call()或apply()通过第一个实参来指定函数中this  ） 
            2. 以方法的形式调用，this指向调用这个方法的对象
            3. 以构造函数的形式调用new Person()，this就是新创建的对象 -->

    <!-- 2. 如何确定this的值
        - test() : window
        - p.test() : p 
        - new test() : 新创建的对象
        - p.call(obj) : obj 
    本质上，任何函数在执行时都是通过某个对象调用的。-->
    <script>
        function Person(color) {
            console.log(this); // 打印这个this的值
            this.color = color;
            this.getColor = function() {
                console.log('get', this);
                return this.color;
            };
            this.setColor = function(color) {
                console.log('set', this);
                this.color = color;
            };
        }
        Person('red') // this 是window对象
        var p = new Person('yellow'); // this是谁 ？ p
        p.getColor(); // this是p

        var obj = {};
        p.setColor.call(obj, 'black'); // this是谁？ obj让setColor方法成为obj对象的方法进行调用

        var test = p.setColor;
        test(); // this是window对象
        function fun1() {
            function fun2() {
                console.log(this);
            }
            fun2(); // this是谁？ window
        }
        fun1();
    </script>
</body>

</html>